<template>
	<view class="page">
		<view class="top" v-if="show">
		</view>
		<view class="content">
			<view class="title">重设密码</view>
			<view class="tip">密码重设后您的账户将使用新密码登录</view>
			<view class="inputBox">
				<view class="passdword">
					<input v-model="password" placeholder="重设密码" :password="pwd" />
					<image @click="changePwd" v-show="!pwd" src="../../static/icon/icon_pwd_open@3x.png"></image>
					<image @click="changePwd" v-show="pwd" src="../../static/icon/icon_pwd_close@3x.png"></image>
				</view>
				<view class="passdword">
					<input v-model="confirmPwd" placeholder="确定密码" :password="numpwd" />
					<image @click="changePwd2" v-show="!numpwd" src="../../static/icon/icon_pwd_open@3x.png"></image>
					<image @click="changePwd2" v-show="numpwd" src="../../static/icon/icon_pwd_close@3x.png"></image>
				</view>
			</view>
			<button class="btn" :loading="loading" :disabled="loading" @click="comfirm">确定密码</button>
		</view>
	</view>
</template>

<script>
	import {resetLoginPwd} from '../../api/login/index'
	export default{
		data() {
			return {
				password:"",
				confirmPwd:"",
				pwd:true,
				numpwd:true,
				show: false,
				phone:"",
				code:"",
				loading:false,
				passwordRege:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/
			}
		},
		onLoad(e) {
			// #ifdef H5
			this.show = true
			// #endif
			if(e.phone){
				this.phone = e.phone
			}
			if(e.code){
				this.code = e.code
			}
		},
		methods:{
			comfirm(){
				if(this.password == ''){
					this.$tools.toast('请输入新密码')
					return
				}
				if(this.confirmPwd == ''){
					this.$tools.toast('请输再次入新密码')
					return
				}
				if(this.password != this.confirmPwd){
					this.$tools.toast('两次输的密码不一致')
					return
				}
				if(!this.passwordRege.test(this.password)){
					this.$tools.toast('密码必须为6-12位，由数字和字母组成')
					return
				}
				this.loading = true
				resetLoginPwd({reNewPwd:this.confirmPwd,newPwd:this.password,code:this.code,phone:this.phone}).then(res=>{
					this.loading = false
					this.$tools.toast("修改成功")
					setTimeout(function(){
						uni.navigateBack({
							delta:3
						})
					},1000)
					
				}).catch(err=>{
					this.loading = false
				})
			},
			changePwd(){
				this.pwd = !this.pwd
			},
			changePwd2(){
				this.numpwd = !this.numpwd
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: 99;
	}
	.top {
		height: 50px;
	}
	.content {
		margin-top: 30rpx;
		padding: 0 60rpx;
		.title {
				font-size: 40rpx;
				font-weight: 700;
		}

		.tip {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
		input{
			font-size: 27rpx!important;
		}
		.inputBox{
			margin-top: 80rpx;
			.phonetip{
				font-size: 21rpx;
				color: #808080;
			}
			.passdword{
				margin-top: 30rpx;
				padding: 30rpx 0;
				border-bottom:0.5px solid $uni-border-color;
				display: flex;
				align-items: center;
				input{
					flex: auto;
					padding: 5rpx;
				}
				image{
					flex: none;
					width: 40rpx;
					height: 40rpx;
				}
			}
			}
			   .btn{
				   background: $uni-bg-color;
				   color: #FFFFFF;
				   margin-top: 60rpx;
				   height: 90rpx;
				   line-height: 90rpx;
			   }
	}
</style>
